<template>
    <div class="CommodityComptoentsTitle">
        <span>{{ title }}</span>
        <div>
            <el-input v-model="input" placeholder="商品名称" style="margin-right: 10px; width: 150px;" />
            <el-button type="primary" @click="loadIng">查询</el-button>
            <!-- <el-button type="primary" plain>高级查询</el-button> -->
            <el-button type="success" @click="dialogFormVisible = true">新建</el-button>
            <el-button type="primary" @click="getOne">编辑</el-button>
            <el-button type="danger" @click="del">删除</el-button>
        </div>
    </div>
    <el-table ref="multipleTableRef" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
        @cell-click="cellClick">
        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="商品编号" show-overflow-tooltip width="150" />
        <el-table-column property="name" label="商品名称" show-overflow-tooltip width="150" />
        <el-table-column property="img" label="商品图片" show-overflow-tooltip width="150" />
        <el-table-column property="specification" label="规格" show-overflow-tooltip width="100" />
        <el-table-column property="price" label="单价" show-overflow-tooltip width="150" />
        <el-table-column label="是否可用">
            <template #default="scope">
                <el-switch v-model="scope.row.ifTrue" @change="switchChange(scope.row)"></el-switch>
            </template>
        </el-table-column>
        <el-table-column property="remark" label="备注" show-overflow-tooltip width="150" />
        <el-table-column property="createUser" label="创建人" show-overflow-tooltip />
        <el-table-column property="date" label="创建时间" show-overflow-tooltip />
    </el-table>
    <el-config-provider :locale="locale">
        <div class="demo-pagination-block">
            <el-pagination :page-sizes="[2, 3, 4, 5]" layout="total, sizes, prev, pager, next, jumper"
                :page-size="pageSize" :total="pageAll" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </el-config-provider>


    <el-dialog v-model="dialogFormVisible" title="新建">
        <el-form style="display: flex; flex-wrap: wrap; justify-content: space-between;" v-model="addTable">
            <el-form-item label="商品名称">
                <el-input autocomplete="off" style="width:250px" placeholder="请输入商品名称" v-model="addTable.name" />
            </el-form-item>
            <el-form-item label="所属分类">
                <el-select placeholder="请输入分类" style="width:250px" v-model="addTable.createUser">
                    <el-option label="超级管理员" value="超级管理员" />
                    <el-option label="测试管理员" value="测试管理员" />
                </el-select>
            </el-form-item>
            <el-radio-group v-model="addTable.ifTrue" style="width:250px">
                <el-radio label='true' size="large">是</el-radio>
                <el-radio label='false' size="large">否</el-radio>
            </el-radio-group>
            <el-form-item label="规格">
                <el-input autocomplete="off" placeholder="请输入规格" style="width:250px" v-model="addTable.specification" />
            </el-form-item>
            <el-form-item label="单价">
                <el-input autocomplete="off" placeholder="请输入单价" style="width:250px" v-model="addTable.price" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input autocomplete="off" placeholder="请输入备注" style="width:250px" v-model="addTable.remark" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="add">
                    添加
                </el-button>
            </span>
        </template>
    </el-dialog>


    <el-dialog v-model="dialogFormVisibleUpdate" title="编辑">
        <el-form style="display: flex; flex-wrap: wrap; justify-content: space-between;" v-model="update">
            <el-form-item label="商品名称">
                <el-input autocomplete="off" style="width:250px" placeholder="请输入商品名称" v-model="update.name" />
            </el-form-item>
            <el-form-item label="所属分类">
                <el-select placeholder="请输入分类" style="width:250px" v-model="update.createUser">
                    <el-option label="超级管理员" value="超级管理员" />
                    <el-option label="测试管理员" value="测试管理员" />
                </el-select>
            </el-form-item>
            <el-radio-group v-model="update.ifTrue" style="width:250px">
                <el-radio label='true' size="large">是</el-radio>
                <el-radio label='false' size="large">否</el-radio>
            </el-radio-group>
            <el-form-item label="规格">
                <el-input autocomplete="off" placeholder="请输入规格" style="width:250px" v-model="update.specification" />
            </el-form-item>
            <el-form-item label="单价">
                <el-input autocomplete="off" placeholder="请输入单价" style="width:250px" v-model="update.price" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input autocomplete="off" placeholder="请输入备注" style="width:250px" v-model="update.remark" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisibleUpdate = false">取消</el-button>
                <el-button type="primary" @click="updata">修改</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup>
import { ref, toRefs, getCurrentInstance } from 'vue'
import { ElTable, ElMessageBox } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
// 用于模糊查询的表单
let input = ref('')
// 分页变成中文
let locale = zhCn

const { appContext: { config: { globalProperties: { $message } } } } = getCurrentInstance();
// 添加对话框状态
const dialogFormVisible = ref(false)
const dialogFormVisibleUpdate = ref(false)
const props = defineProps({
    //子组件接收父组件传递过来的值
    list: Array,
    title: String,
    pageIndex: Number,
    pageSize: Number,
    pageAll: Number,
    getOnes: Object
})
// 接收父组件传来的值
const { list, title, pageIndex, pageSize, pageAll } = toRefs(props)
// 定义向父传的事件
const emit = defineEmits(['switchChange', 'changePageIndex', 'changePageSize', 'del', 'add', 'updata', 'loadIng'])

// 向父组件传值 并反应当前状态
let cellClick = (row) => {
}
// 滑块改变事件
let switchChange = (b) => {
    // console.log(b);
    emit('switchChange', b)
}
// 定义添加变量
let addTable = ref({
    name: '',
    createUser: '',
    specification: '',
    price: '',
    remark: '',
    ifTrue: ''
})
// 定义修改变量
let update = ref(
    {
        name: '',
        createUser: '',
        specification: '',
        price: '',
        remark: '',
        ifTrue: ''
    }
)
// 定义修改变量
const multipleTableRef = ref()
// 表格checkbox选中加入进来的数组
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
// 查询单个事件
let getOne = () => {
    if (multipleSelection.value.length == 0) return $message('请至少选择一行')
    if (multipleSelection.value.length > 1) return $message('仅可选择一行修改')
    dialogFormVisibleUpdate.value = true
    update.value = multipleSelection.value[0]
}
let updata = () => {
    dialogFormVisibleUpdate.value = false
    emit('updata', update.value)
}
let loadIng = () => {
    emit('loadIng', input.value)
}
// 删除事件
let del = () => {
    ElMessageBox.confirm(
        '确定删除吗?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            emit('del', multipleSelection.value)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}
// 添加事件
let add = () => {
    emit('add', addTable.value)
    dialogFormVisible.value = false
    addTable.value = {
        name: '',
        createUser: '',
        specification: '',
        price: '',
        remark: ''
    }
}
// 改变pageSize个数
let pageSizeS = pageSize.value
const handleSizeChange = (val) => {
    pageSizeS = val
    emit('changePageSize', pageSizeS)
}

// 定义当前页并传递给父组件
let pageIndexS = pageIndex.value
// 当前页的函数
const handleCurrentChange = (val) => {
    pageIndexS = val
    // 向父组件传自定义事件
    emit('changePageIndex', pageIndexS)
}

</script>
<style scoped lang='scss'>
.CommodityComptoentsTitle {
    margin: 10px 0;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;

    span {
        font-weight: 700;
    }

    div {
        display: flex;
    }
}

.demo-pagination-block {
    float: right;
    margin: 10px 20px;
}
</style>